<template>
    <a-menu mode="inline" theme="dark" :selectedKeys="state.selectedKeys" :openKeys="state.openKeys" @openChange="onOpenChange">
        <template v-for="item in menuList" :key="item.key">
            <template v-if="!item.children">
                <a-menu-item :key="item.key">
                    <template #icon>
                        <component :is="$antIcons[item.icon]" />
                    </template>
                    {{ item.title }}
                </a-menu-item>
            </template>
            <template v-else>
                <a-sub-menu :key="item.key">
                    <template #icon>
                        <component :is="$antIcons[item.icon]" />
                    </template>
                    <template #title>
                        {{ item.title }}
                    </template>
                    <a-menu-item key="5">Option 1</a-menu-item>
                    <a-menu-item key="6">Option 6</a-menu-item>
                </a-sub-menu>
            </template>
        </template>
    </a-menu>
</template>

<script setup>
import { reactive, ref } from 'vue'

const menuList = reactive([{
    key: 'A',
    icon: 'BookOutlined',
    title: '功能功能功能A',
    children: []
}, {
    key: 'B',
    icon: 'GiftOutlined',
    title: '功能功能B',
    children: []
}, {
    key: 'C',
    icon: 'LaptopOutlined',
    title: '功能功能C',
    children: []
}, {
    key: 'D',
    icon: 'InsuranceOutlined',
    title: '功能功能功能D',
    children: []
}, {
    key: 'E',
    icon: 'PartitionOutlined',
    title: '功能功能功能E',
    children: []
}, {
    key: 'F',
    icon: 'ProjectOutlined',
    title: '功能功能功能F',
    children: []
}])

const state = reactive({
    selectedKeys: ['A'],
    openKeys: ['A']
})

const onOpenChange = (keys) => {
    state.openKeys = [keys.pop()]
};
</script>

<style>
</style>
